import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '登录界面',
      debugShowCheckedModeBanner: false, //用于控制调试标志的显示 false 关闭调试横幅
      theme: ThemeData(
        // This is the theme of your application.
        //
        // TRY THIS: Try running your application with "flutter run". You'll see
        // the application has a purple toolbar. Then, without quitting the app,
        // try changing the seedColor in the colorScheme below to Colors.green
        // and then invoke "hot reload" (save your changes or press the "hot
        // reload" button in a Flutter-supported IDE, or press "r" if you used
        // the command line to start the app).
        //
        // Notice that the counter didn't reset back to zero; the application
        // state is not lost during the reload. To reset the state, use hot
        // restart instead.
        //
        // This works for code too, not just values: Most code changes can be
        // tested with just a hot reload.
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const LoginPage(),
    );
  }
}

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 24.0),
      //主列布局
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          //顶部Logo区域
          _buildLogoSection(),
          const SizedBox(height: 32.0),
          // 输入框区域
          _buildInputSection(),
          const SizedBox(height: 24.0),
          //登录按钮
          _buildLoginButton(),
          const SizedBox(height: 32.0),
          // 底部链接区域（水平布局）
          _buildBottomLinks(),
        ],
      ),
    ),);
  }

// Logo区域
  Widget _buildLogoSection() {
    return const Column(
      children: [
        // 使用Stack实现图标+背景的效果
        Stack(
          alignment: Alignment.center,
          children: [
            //圆形背景
            CircleAvatar(
              radius: 48,
              backgroundColor: Colors.blue,
            ),
            Icon(Icons.school, size: 48, color: Colors.white),
          ],
        ),
        SizedBox(height: 16.0),
        Text('欢迎登录',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))
      ],
    );
  }

  // 输入框区域
  Widget _buildInputSection() {
    return  const Column(
      children: [
        // 用户名输入行
        Row(
            children: [
              Icon(Icons.person, color: Colors.grey),
              SizedBox(width: 12),
              Expanded(child: TextField(decoration: InputDecoration(
                  hintText: '请输入用户名', border: InputBorder.none),),)
            ]),
         Divider(height: 1,thickness: 1),
         SizedBox(height: 16),
        // 密码输入行
        Row(
            children: [
              Icon(Icons.lock,color: Colors.grey),
              SizedBox(width: 12),
              Expanded(child: TextField(decoration: InputDecoration(
                  hintText: "请输入密码",border: InputBorder.none),),)
            ]),
        Divider(height: 1,thickness: 1),
      ],
    ) ;
  }
  // 登录按钮
  Widget _buildLoginButton() {
      return SizedBox(
          width: double.infinity,
          height: 48,
          child:ElevatedButton(
            style:  ElevatedButton.styleFrom(
            backgroundColor: Colors.blue,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(24),
            )
          ), onPressed: () { print("登录\n"); },
            child: const Text('登  录',style: TextStyle(fontSize: 18,color: Colors.white)),
          ),
        );
  }
  // 底部链接
  Widget _buildBottomLinks() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        TextButton(onPressed: (){},
            child: const Text('忘记密码',style: TextStyle(color: Colors.grey))),
        TextButton(onPressed: (){},
            child: const Text('新用户注册',style: TextStyle(color: Colors.blue)))
      ],
    );
  }
}